<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站分享弹出样式</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 0;
      height: 100vh;
      background-color: #f5f5f5;
    }
    
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .content {
      flex: 1;
      padding: 16px;
      overflow-y: auto;
    }
    
    .post-card {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      margin-bottom: 16px;
    }
    
    .post-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .post-content {
      padding: 16px;
    }
    
    .post-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .post-text {
      color: #666;
      font-size: 14px;
      margin-bottom: 16px;
    }
    
    .post-actions {
      display: flex;
      justify-content: space-between;
      padding-top: 8px;
      border-top: 1px solid #eee;
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #666;
      background: none;
      border: none;
      font-size: 14px;
      padding: 8px 12px;
      border-radius: 6px;
    }
    
    .action-btn:hover {
      background-color: #f5f5f5;
    }
    
    .action-btn.primary {
      color: #4263EB;
    }
    
    /* 分享弹窗基础样式 */
    .share-modal {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: white;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -2px 15px rgba(0,0,0,0.1);
      z-index: 1050;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    
    .share-modal.show {
      transform: translateY(0);
    }
    
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      z-index: 1040;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
    }
    
    .modal-backdrop.show {
      opacity: 1;
      visibility: visible;
    }
    
    .modal-header {
      padding: 16px;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .close-btn {
      background: none;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #666;
    }
    
    .close-btn:hover {
      background-color: #f5f5f5;
    }
    
    .share-options {
      padding: 16px;
    }
    
    .share-title {
      font-size: 14px;
      color: #999;
      margin-bottom: 12px;
      padding-left: 8px;
    }
    
    .share-buttons {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      padding-bottom: 8px;
      margin-bottom: 16px;
    }
    
    .share-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      flex: 0 0 auto;
    }
    
    .share-icon-container {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      color: white;
      font-size: 24px;
    }
    
    .share-label {
      font-size: 12px;
      color: #333;
      white-space: nowrap;
    }
    
    .share-action-buttons {
      display: flex;
      gap: 12px;
      padding: 16px;
      border-top: 1px solid #eee;
    }
    
    .share-action-btn {
      flex: 1;
      padding: 12px;
      border-radius: 8px;
      border: none;
      font-weight: 500;
      font-size: 16px;
    }
    
    .cancel-btn {
      background-color: #f5f5f5;
      color: #666;
    }
    
    .confirm-btn {
      background-color: #4263EB;
      color: white;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1000;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: #4263EB;
      color: white;
    }
    
    /* 各风格特定样式 */
    /* 1. 经典图标式 */
    #style1 .share-icon-container {
      background-color: #eee;
      color: #333;
    }
    
    #style1 .share-icon-container.weixin { background-color: #07C160; }
    #style1 .share-icon-container.weibo { background-color: #E6162D; }
    #style1 .share-icon-container.qq { background-color: #12B7F5; }
    #style1 .share-icon-container.link { background-color: #666; }
    
    /* 2. 简洁列表式 */
    #style2 .share-buttons {
      flex-direction: column;
      overflow-x: visible;
      gap: 0;
    }
    
    #style2 .share-btn {
      flex-direction: row;
      width: 100%;
      padding: 12px 16px;
      border-bottom: 1px solid #eee;
    }
    
    #style2 .share-btn:last-child {
      border-bottom: none;
    }
    
    #style2 .share-icon-container {
      width: 40px;
      height: 40px;
      font-size: 18px;
      margin-bottom: 0;
      margin-right: 16px;
    }
    
    #style2 .share-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1;
    }
    
    #style2 .share-description {
      font-size: 12px;
      color: #999;
    }
    
    #style2 .share-icon-container.weixin { background-color: #07C160; }
    #style2 .share-icon-container.weibo { background-color: #E6162D; }
    #style2 .share-icon-container.qq { background-color: #12B7F5; }
    #style2 .share-icon-container.link { background-color: #666; }
    #style2 .share-icon-container.copy { background-color: #888; }
    #style2 .share-icon-container.more { background-color: #aaa; }
    
    /* 3. 标签式 */
    #style3 .share-buttons {
      flex-wrap: wrap;
      overflow-x: visible;
      justify-content: flex-start;
    }
    
    #style3 .share-btn {
      flex-direction: row;
      align-items: center;
      background-color: #f5f5f5;
      border-radius: 20px;
      padding: 6px 12px;
    }
    
    #style3 .share-icon-container {
      width: 32px;
      height: 32px;
      font-size: 16px;
      margin-bottom: 0;
      margin-right: 6px;
    }
    
    #style3 .share-label {
      font-size: 14px;
    }
    
    #style3 .share-icon-container.weixin { background-color: #07C160; }
    #style3 .share-icon-container.weibo { background-color: #E6162D; }
    #style3 .share-icon-container.qq { background-color: #12B7F5; }
    #style3 .share-icon-container.douban { background-color: #228A31; }
    #style3 .share-icon-container.zhihu { background-color: #0F88EB; }
    #style3 .share-icon-container.twitter { background-color: #1DA1F2; }
    #style3 .share-icon-container.facebook { background-color: #1877F2; }
    
    /* 4. 联系人式 */
    #style4 .share-buttons {
      flex-direction: column;
      overflow-x: visible;
      gap: 8px;
    }
    
    #style4 .share-btn {
      flex-direction: row;
      align-items: center;
      width: 100%;
      background-color: #f5f5f5;
      border-radius: 8px;
      padding: 10px 16px;
    }
    
    #style4 .contact-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 12px;
    }
    
    #style4 .contact-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1;
    }
    
    #style4 .contact-name {
      font-size: 16px;
      font-weight: 500;
    }
    
    #style4 .contact-status {
      font-size: 12px;
      color: #999;
    }
    
    #style4 .select-btn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    #style4 .select-btn.selected {
      background-color: #4263EB;
      border-color: #4263EB;
      color: white;
    }
    
    /* 5. 深色模式 */
    #style5 {
      background-color: #121212;
    }
    
    #style5 .content {
      background-color: #121212;
    }
    
    #style5 .post-card {
      background-color: #1e1e1e;
    }
    
    #style5 .post-title, #style5 .action-btn.primary {
      color: white;
    }
    
    #style5 .post-text, #style5 .action-btn {
      color: #aaa;
    }
    
    #style5 .post-actions, #style5 .modal-header {
      border-color: #333;
    }
    
    #style5 .share-modal {
      background-color: #1e1e1e;
    }
    
    #style5 .modal-title, #style5 .share-label, #style5 .contact-name {
      color: white;
    }
    
    #style5 .share-title, #style5 .contact-status {
      color: #888;
    }
    
    #style5 .close-btn, #style5 .cancel-btn {
      color: #aaa;
      background-color: #333;
    }
    
    #style5 .close-btn:hover {
      background-color: #444;
    }
    
    #style5 .share-btn {
      color: white;
    }
    
    #style5 .style-switcher {
      background-color: #1e1e1e;
    }
    
    #style5 .style-btn {
      color: #ddd;
    }
    
    /* 6. 带预览式 */
    #style6 .preview-container {
      padding: 16px;
      border-bottom: 1px solid #eee;
    }
    
    #style6 .preview-card {
      background-color: #f5f5f5;
      border-radius: 8px;
      overflow: hidden;
      max-width: 240px;
      margin: 0 auto;
    }
    
    #style6 .preview-image {
      width: 100%;
      height: 120px;
      object-fit: cover;
    }
    
    #style6 .preview-content {
      padding: 12px;
    }
    
    #style6 .preview-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    #style6 .preview-source {
      font-size: 12px;
      color: #999;
    }
    
    #style6 .share-buttons {
      margin-top: 16px;
    }
    
    #style6 .share-icon-container {
      background-color: #eee;
      color: #333;
    }
    
    #style6 .share-icon-container.weixin { background-color: #07C160; }
    #style6 .share-icon-container.weibo { background-color: #E6162D; }
    #style6 .share-icon-container.qq { background-color: #12B7F5; }
    #style6 .share-icon-container.link { background-color: #666; }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">经典图标</button>
    <button class="style-btn" data-style="style2">简洁列表</button>
    <button class="style-btn" data-style="style3">标签式</button>
    <button class="style-btn" data-style="style4">联系人</button>
    <button class="style-btn" data-style="style5">深色模式</button>
    <button class="style-btn" data-style="style6">带预览</button>
  </div>
  
  <!-- 1. 经典图标式分享弹窗 -->
  <div id="style1" class="share-style active">
    <div class="container">
      <div class="content">
        <div class="post-card">
          <img src="https://picsum.photos/600/400?random=1" alt="帖子图片" class="post-image">
          <div class="post-content">
            <h3 class="post-title">探索城市中的隐秘角落</h3>
            <p class="post-text">分享一组城市摄影作品，记录那些不为人知的美丽角落，每一处都有独特的故事...</p>
            <div class="post-actions">
              <button class="action-btn">
                <i class="fa fa-heart-o"></i>
                <span>喜欢</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-comment-o"></i>
                <span>评论</span>
              </button>
              <button class="action-btn primary share-trigger">
                <i class="fa fa-share-alt"></i>
                <span>分享</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 -->
    <div class="share-modal" id="shareModal1">
      <div class="modal-header">
        <h3 class="modal-title">分享到</h3>
        <button class="close-btn" id="closeBtn1">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-options">
        <div class="share-buttons">
          <a href="#" class="share-btn" data-platform="weixin">
            <div class="share-icon-container weixin">
              <i class="fa fa-weixin"></i>
            </div>
            <span class="share-label">微信</span>
          </a>
          <a href="#" class="share-btn" data-platform="weibo">
            <div class="share-icon-container weibo">
              <i class="fa fa-weibo"></i>
            </div>
            <span class="share-label">微博</span>
          </a>
          <a href="#" class="share-btn" data-platform="qq">
            <div class="share-icon-container qq">
              <i class="fa fa-qq"></i>
            </div>
            <span class="share-label">QQ</span>
          </a>
          <a href="#" class="share-btn" data-platform="link">
            <div class="share-icon-container link">
              <i class="fa fa-link"></i>
            </div>
            <span class="share-label">复制链接</span>
          </a>
          <a href="#" class="share-btn" data-platform="more">
            <div class="share-icon-container">
              <i class="fa fa-ellipsis-h"></i>
            </div>
            <span class="share-label">更多</span>
          </a>
        </div>
      </div>
      <div class="share-action-buttons">
        <button class="share-action-btn cancel-btn" id="cancelBtn1">取消</button>
      </div>
    </div>
    <div class="modal-backdrop" id="backdrop1"></div>
  </div>
  
  <!-- 2. 简洁列表式分享弹窗 -->
  <div id="style2" class="share-style">
    <div class="container">
      <div class="content">
        <div class="post-card">
          <img src="https://picsum.photos/600/400?random=2" alt="帖子图片" class="post-image">
          <div class="post-content">
            <h3 class="post-title">周末美食探店指南</h3>
            <p class="post-text">整理了几家隐藏在巷子里的美食小店，从早餐到晚餐，让你的周末味蕾不重样...</p>
            <div class="post-actions">
              <button class="action-btn">
                <i class="fa fa-heart-o"></i>
                <span>喜欢</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-comment-o"></i>
                <span>评论</span>
              </button>
              <button class="action-btn primary share-trigger">
                <i class="fa fa-share-alt"></i>
                <span>分享</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 -->
    <div class="share-modal" id="shareModal2">
      <div class="modal-header">
        <h3 class="modal-title">分享</h3>
        <button class="close-btn" id="closeBtn2">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-options">
        <div class="share-buttons">
          <a href="#" class="share-btn" data-platform="weixin">
            <div class="share-icon-container weixin">
              <i class="fa fa-weixin"></i>
            </div>
            <div class="share-info">
              <span class="share-label">微信好友</span>
              <span class="share-description">发送给微信好友</span>
            </div>
          </a>
          <a href="#" class="share-btn" data-platform="weibo">
            <div class="share-icon-container weibo">
              <i class="fa fa-weibo"></i>
            </div>
            <div class="share-info">
              <span class="share-label">微博</span>
              <span class="share-description">分享到微博动态</span>
            </div>
          </a>
          <a href="#" class="share-btn" data-platform="qq">
            <div class="share-icon-container qq">
              <i class="fa fa-qq"></i>
            </div>
            <div class="share-info">
              <span class="share-label">QQ好友</span>
              <span class="share-description">发送给QQ好友</span>
            </div>
          </a>
          <a href="#" class="share-btn" data-platform="copy">
            <div class="share-icon-container copy">
              <i class="fa fa-copy"></i>
            </div>
            <div class="share-info">
              <span class="share-label">复制链接</span>
              <span class="share-description">复制链接到剪贴板</span>
            </div>
          </a>
          <a href="#" class="share-btn" data-platform="more">
            <div class="share-icon-container more">
              <i class="fa fa-ellipsis-h"></i>
            </div>
            <div class="share-info">
              <span class="share-label">更多方式</span>
              <span class="share-description">通过其他应用分享</span>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="modal-backdrop" id="backdrop2"></div>
  </div>
  
  <!-- 3. 标签式分享弹窗 -->
  <div id="style3" class="share-style">
    <div class="container">
      <div class="content">
        <div class="post-card">
          <img src="https://picsum.photos/600/400?random=3" alt="帖子图片" class="post-image">
          <div class="post-content">
            <h3 class="post-title">年度电影推荐清单</h3>
            <p class="post-text">从剧情片到科幻片，这10部电影你不能错过，每一部都能带给你不同的思考...</p>
            <div class="post-actions">
              <button class="action-btn">
                <i class="fa fa-heart-o"></i>
                <span>喜欢</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-comment-o"></i>
                <span>评论</span>
              </button>
              <button class="action-btn primary share-trigger">
                <i class="fa fa-share-alt"></i>
                <span>分享</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 -->
    <div class="share-modal" id="shareModal3">
      <div class="modal-header">
        <h3 class="modal-title">分享内容</h3>
        <button class="close-btn" id="closeBtn3">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-options">
        <p class="share-title">选择分享平台：</p>
        <div class="share-buttons">
          <a href="#" class="share-btn" data-platform="weixin">
            <div class="share-icon-container weixin">
              <i class="fa fa-weixin"></i>
            </div>
            <span class="share-label">微信</span>
          </a>
          <a href="#" class="share-btn" data-platform="weibo">
            <div class="share-icon-container weibo">
              <i class="fa fa-weibo"></i>
            </div>
            <span class="share-label">微博</span>
          </a>
          <a href="#" class="share-btn" data-platform="qq">
            <div class="share-icon-container qq">
              <i class="fa fa-qq"></i>
            </div>
            <span class="share-label">QQ</span>
          </a>
          <a href="#" class="share-btn" data-platform="douban">
            <div class="share-icon-container douban">
              <i class="fa fa-douban"></i>
            </div>
            <span class="share-label">豆瓣</span>
          </a>
          <a href="#" class="share-btn" data-platform="zhihu">
            <div class="share-icon-container zhihu">
              <i class="fa fa-book"></i>
            </div>
            <span class="share-label">知乎</span>
          </a>
          <a href="#" class="share-btn" data-platform="twitter">
            <div class="share-icon-container twitter">
              <i class="fa fa-twitter"></i>
            </div>
            <span class="share-label">Twitter</span>
          </a>
          <a href="#" class="share-btn" data-platform="facebook">
            <div class="share-icon-container facebook">
              <i class="fa fa-facebook"></i>
            </div>
            <span class="share-label">Facebook</span>
          </a>
        </div>
      </div>
      <div class="share-action-buttons">
        <button class="share-action-btn cancel-btn" id="cancelBtn3">取消</button>
      </div>
    </div>
    <div class="modal-backdrop" id="backdrop3"></div>
  </div>
  
  <!-- 4. 联系人式分享弹窗 -->
  <div id="style4" class="share-style">
    <div class="container">
      <div class="content">
        <div class="post-card">
          <img src="https://picsum.photos/600/400?random=4" alt="帖子图片" class="post-image">
          <div class="post-content">
            <h3 class="post-title">最新科技产品评测</h3>
            <p class="post-text">深度评测了几款最新发布的科技产品，从性能到价格，帮你做出最明智的选择...</p>
            <div class="post-actions">
              <button class="action-btn">
                <i class="fa fa-heart-o"></i>
                <span>喜欢</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-comment-o"></i>
                <span>评论</span>
              </button>
              <button class="action-btn primary share-trigger">
                <i class="fa fa-share-alt"></i>
                <span>分享</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 -->
    <div class="share-modal" id="shareModal4">
      <div class="modal-header">
        <h3 class="modal-title">分享给好友</h3>
        <button class="close-btn" id="closeBtn4">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-options">
        <p class="share-title">最近联系人：</p>
        <div class="share-buttons">
          <div class="share-btn" data-contact="1">
            <img src="https://picsum.photos/100/100?random=10" alt="联系人头像" class="contact-avatar">
            <div class="contact-info">
              <span class="contact-name">李小华</span>
              <span class="contact-status">在线</span>
            </div>
            <div class="select-btn">
              <i class="fa fa-check" style="font-size: 12px; display: none;"></i>
            </div>
          </div>
          <div class="share-btn" data-contact="2">
            <img src="https://picsum.photos/100/100?random=11" alt="联系人头像" class="contact-avatar">
            <div class="contact-info">
              <span class="contact-name">王大明</span>
              <span class="contact-status">30分钟前在线</span>
            </div>
            <div class="select-btn">
              <i class="fa fa-check" style="font-size: 12px; display: none;"></i>
            </div>
          </div>
          <div class="share-btn" data-contact="3">
            <img src="https://picsum.photos/100/100?random=12" alt="联系人头像" class="contact-avatar">
            <div class="contact-info">
              <span class="contact-name">张小红</span>
              <span class="contact-status">在线</span>
            </div>
            <div class="select-btn">
              <i class="fa fa-check" style="font-size: 12px; display: none;"></i>
            </div>
          </div>
          <div class="share-btn" data-contact="4">
            <img src="https://picsum.photos/100/100?random=13" alt="联系人头像" class="contact-avatar">
            <div class="contact-info">
              <span class="contact-name">赵小刚</span>
              <span class="contact-status">昨天在线</span>
            </div>
            <div class="select-btn">
              <i class="fa fa-check" style="font-size: 12px; display: none;"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="share-action-buttons">
        <button class="share-action-btn cancel-btn" id="cancelBtn4">取消</button>
        <button class="share-action-btn confirm-btn" id="confirmBtn4">发送</button>
      </div>
    </div>
    <div class="modal-backdrop" id="backdrop4"></div>
  </div>
  
  <!-- 5. 深色模式分享弹窗 -->
  <div id="style5" class="share-style">
    <div class="container">
      <div class="content">
        <div class="post-card">
          <img src="https://picsum.photos/600/400?random=5" alt="帖子图片" class="post-image">
          <div class="post-content">
            <h3 class="post-title">深夜阅读书单推荐</h3>
            <p class="post-text">精选10本适合深夜阅读的书籍，从散文到小说，让文字陪你度过宁静的夜晚...</p>
            <div class="post-actions">
              <button class="action-btn">
                <i class="fa fa-heart-o"></i>
                <span>喜欢</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-comment-o"></i>
                <span>评论</span>
              </button>
              <button class="action-btn primary share-trigger">
                <i class="fa fa-share-alt"></i>
                <span>分享</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 -->
    <div class="share-modal" id="shareModal5">
      <div class="modal-header">
        <h3 class="modal-title">分享到</h3>
        <button class="close-btn" id="closeBtn5">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="share-options">
        <div class="share-buttons">
          <a href="#" class="share-btn" data-platform="weixin">
            <div class="share-icon-container weixin">
              <i class="fa fa-weixin"></i>
            </div>
            <span class="share-label">微信</span>
          </a>
          <a href="#" class="share-btn" data-platform="weibo">
            <div class="share-icon-container weibo">
              <i class="fa fa-weibo"></i>
            </div>
            <span class="share-label">微博</span>
          </a>
          <a href="#" class="share-btn" data-platform="qq">
            <div class="share-icon-container qq">
              <i class="fa fa-qq"></i>
            </div>
            <span class="share-label">QQ</span>
          </a>
          <a href="#" class="share-btn" data-platform="link">
            <div class="share-icon-container link">
              <i class="fa fa-link"></i>
            </div>
            <span class="share-label">复制链接</span>
          </a>
          <a href="#" class="share-btn" data-platform="more">
            <div class="share-icon-container">
              <i class="fa fa-ellipsis-h"></i>
            </div>
            <span class="share-label">更多</span>
          </a>
        </div>
      </div>
      <div class="share-action-buttons">
        <button class="share-action-btn cancel-btn" id="cancelBtn5">取消</button>
      </div>
    </div>
    <div class="modal-backdrop" id="backdrop5"></div>
  </div>
  
  <!-- 6. 带预览式分享弹窗 -->
  <div id="style6" class="share-style">
    <div class="container">
      <div class="content">
        <div class="post-card">
          <img src="https://picsum.photos/600/400?random=6" alt="帖子图片" class="post-image">
          <div class="post-content">
            <h3 class="post-title">夏日旅行目的地推荐</h3>
            <p class="post-text">盘点几个适合夏日旅行的小众目的地，避开人群，享受属于你的宁静假期...</p>
            <div class="post-actions">
              <button class="action-btn">
                <i class="fa fa-heart-o"></i>
                <span>喜欢</span>
              </button>
              <button class="action-btn">
                <i class="fa fa-comment-o"></i>
                <span>评论</span>
              </button>
              <button class="action-btn primary share-trigger">
                <i class="fa fa-share-alt"></i>
                <span>分享</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分享弹窗 -->
    <div class="share-modal" id="shareModal6">
      <div class="modal-header">
        <h3 class="modal-title">分享内容</h3>
        <button class="close-btn" id="closeBtn6">
          <i class="fa fa-times"></i>
        </button>
      </div>
      <div class="preview-container">
        <div class="preview-card">
          <img src="https://picsum.photos/600/400?random=6" alt="预览图片" class="preview-image">
          <div class="preview-content">
            <div class="preview-title">夏日旅行目的地推荐</div>
            <div class="preview-source">社交圈</div>
          </div>
        </div>
      </div>
      <div class="share-options">
        <p class="share-title">分享到：</p>
        <div class="share-buttons">
          <a href="#" class="share-btn" data-platform="weixin">
            <div class="share-icon-container weixin">
              <i class="fa fa-weixin"></i>
            </div>
            <span class="share-label">微信</span>
          </a>
          <a href="#" class="share-btn" data-platform="weibo">
            <div class="share-icon-container weibo">
              <i class="fa fa-weibo"></i>
            </div>
            <span class="share-label">微博</span>
          </a>
          <a href="#" class="share-btn" data-platform="qq">
            <div class="share-icon-container qq">
              <i class="fa fa-qq"></i>
            </div>
            <span class="share-label">QQ</span>
          </a>
          <a href="#" class="share-btn" data-platform="link">
            <div class="share-icon-container link">
              <i class="fa fa-link"></i>
            </div>
            <span class="share-label">复制链接</span>
          </a>
          <a href="#" class="share-btn" data-platform="more">
            <div class="share-icon-container">
              <i class="fa fa-ellipsis-h"></i>
            </div>
            <span class="share-label">更多</span>
          </a>
        </div>
      </div>
      <div class="share-action-buttons">
        <button class="share-action-btn cancel-btn" id="cancelBtn6">取消</button>
      </div>
    </div>
    <div class="modal-backdrop" id="backdrop6"></div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 样式切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的样式页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.share-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).style.display = 'block';
      });
    });
    
    // 初始化 - 隐藏所有样式，只显示默认样式
    document.querySelectorAll('.share-style').forEach((style, index) => {
      if (index !== 0) {
        style.style.display = 'none';
      } else {
        style.style.display = 'block';
      }
    });
    
    // 为每个样式添加分享弹窗控制
    for (let i = 1; i <= 6; i++) {
      // 获取元素
      const shareTrigger = document.querySelector(`#style${i} .share-trigger`);
      const shareModal = document.getElementById(`shareModal${i}`);
      const closeBtn = document.getElementById(`closeBtn${i}`);
      const cancelBtn = document.getElementById(`cancelBtn${i}`);
      const backdrop = document.getElementById(`backdrop${i}`);
      const confirmBtn = document.getElementById(`confirmBtn${i}`);
      
      // 打开弹窗
      shareTrigger.addEventListener('click', () => {
        shareModal.classList.add('show');
        backdrop.classList.add('show');
      });
      
      // 关闭弹窗函数
      const closeModal = () => {
        shareModal.classList.remove('show');
        backdrop.classList.remove('show');
      };
      
      // 关闭按钮
      closeBtn.addEventListener('click', closeModal);
      cancelBtn.addEventListener('click', closeModal);
      backdrop.addEventListener('click', closeModal);
      
      // 分享按钮点击事件
      document.querySelectorAll(`#style${i} .share-btn`).forEach(btn => {
        btn.addEventListener('click', function(e) {
          e.preventDefault();
          
          let message = '';
          const platform = this.getAttribute('data-platform');
          const contact = this.getAttribute('data-contact');
          
          if (contact) {
            // 联系人选择
            const selectBtn = this.querySelector('.select-btn');
            const checkIcon = selectBtn.querySelector('i');
            
            selectBtn.classList.toggle('selected');
            checkIcon.style.display = selectBtn.classList.contains('selected') ? 'block' : 'none';
            
            // 如果是确认发送按钮
            if (confirmBtn) {
              confirmBtn.addEventListener('click', () => {
                const selectedCount = document.querySelectorAll(`#style${i} .select-btn.selected`).length;
                if (selectedCount > 0) {
                  message = `已分享给${selectedCount}位联系人`;
                  alert(message);
                  closeModal();
                } else {
                  alert('请选择至少一位联系人');
                }
              });
            }
          } else if (platform) {
            // 平台分享
            switch(platform) {
              case 'weixin': message = '已分享到微信'; break;
              case 'weibo': message = '已分享到微博'; break;
              case 'qq': message = '已分享到QQ'; break;
              case 'link': message = '链接已复制到剪贴板'; break;
              case 'copy': message = '链接已复制到剪贴板'; break;
              case 'douban': message = '已分享到豆瓣'; break;
              case 'zhihu': message = '已分享到知乎'; break;
              case 'twitter': message = '已分享到Twitter'; break;
              case 'facebook': message = '已分享到Facebook'; break;
              case 'more': message = '更多分享方式已打开'; break;
              default: message = '分享成功';
            }
            
            alert(message);
            closeModal();
          }
        });
      });
    }
  </script>
</body>
</html>
